import { GetServerSideProps, NextPage, PageConfig } from 'next';
import Head from 'next/head';
import React, { useEffect, useState } from 'react';
import { tbteacherlist, tbtheteacherisqualifiedforthecurriculum } from '../../atoms/db';
import { Query as Q1 } from '../api/teacher/query.api';
import Jcontent from './jcontent';

interface IProps {
	query: Q1;
	teachers: Pick<ITbteacherlist, 'teacher_id' | 'teachername'>[];
	theteacherisqualifiedforthecurriculums: Pick<ITbtheteacherisqualifiedforthecurriculum, 'coursename' | 'professionalname' | 'teachername' | 'teacher_id' | 'classgroup'>[];
}

/**
 * 教师管理
 */
const Page: NextPage<IProps> = ({ query, theteacherisqualifiedforthecurriculums, teachers }) => {
	return (
		<>
			<Head>
				<title>教师管理</title>
			</Head>
			<Jcontent
				initialquery={query}
				teachers={teachers}
				theteacherisqualifiedforthecurriculums={theteacherisqualifiedforthecurriculums} />
		</>
	);
};

export const config: PageConfig = {
	amp: false
};

export default Page;

// pre-render this page on each request
export const getServerSideProps: GetServerSideProps<IProps> = async (context) => {
	const query = context.query as Record<string, string>;
	const teachers = await tbteacherlist()
		.select('teacher_id', 'teachername')
		.orderBy('teachername', 'asc');
	const theteacherisqualifiedforthecurriculums = await tbtheteacherisqualifiedforthecurriculum()
		.select('coursename', 'professionalname', 'teachername', 'teacher_id', 'classgroup')
		.orderBy('coursename', 'asc');
	return {
		props: {
			theteacherisqualifiedforthecurriculums,
			teachers,
			query: {
				page: query.page || '1',
				pagesize: '10',
				q: query.q || ''
			}

		}
	};
};
